<template>
	<view class="pagebox">
		<view class="openvip_card">
			<view class="oc_out">
				<image :src="url+'/applet/common/yellow.png'" />
				<view class="oc_out_a">
					<text style="font-size: 56rpx;">{{detail.title}}</text>
					<text style="font-size: 30rpx;">会员</text>
				</view>
				<view class="oc_out_b">
					<text style="font-size: 40rpx;color:#333;">￥</text>
					<text style="font-size: 56rpx;color:#333;">{{detail.price}}</text>
					<text style="font-size: 40rpx;color:#333;">/年 </text>
					<text
						style="font-size: 30rpx;color:#999;text-decoration: line-through;">￥{{detail.old_price}}</text>
				</view>
				<view class="oc_out_c" v-if="state==0">开卡后可享会员权益</view>

			</view>
		</view>

		<view class="title_txt">
			超级VIP专属权限
			<image src="/static/title_before.png"></image>
		</view>

		<view class="listbox">
			<view class="listbox_item">
				<image :src="detail.pw1_img" />
				<text>{{detail.pw1}}</text>
			</view>
			<view class="listbox_item">
				<image :src="detail.pw2_img" />
				<text>{{detail.pw2}}</text>
			</view>
			<view class="listbox_item">
				<image :src="detail.pw3_img" />
				<text>{{detail.pw3}}</text>
			</view>
			<view class="listbox_item">
				<image :src="detail.pw4_img" />
				<text>{{detail.pw4}}</text>
			</view>
			<view class="listbox_item">
				<image :src="detail.pw5_img" />
				<text>{{detail.pw5}}</text>
			</view>
		</view>

		<view class="xieyi" @click="vip">
			<text style="color:#999;">开通前请阅读</text>
			<text>《会员服务协议》</text>
		</view>


		<view class="bottom_box">
			<view class="botbox_left">
				<view style="color:#F5A73B;font-weight: bold;margin-right:9.84rpx;">
					<text style="font-size: 30rpx;">￥</text>
					<text style="font-size: 45rpx;">{{detail.price}}</text>
				</view>
				<view style="font-size: 30rpx;color:#999;">立省{{detail.old_price - detail.price}}元</view>
			</view>
			<view @click="handlePay" class="botbox_btn">
				确认协议并支付
			</view>
		</view>
		<view style="height:120rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [{
						name: '优惠券赠送',
						src: '/static/ov_a.png'
					},
					{
						name: '会员专属标识',
						src: '/static/ov_b.png'
					},
					{
						name: '专享会员价',
						src: '/static/ov_c.png'
					},
					{
						name: '专享客服',
						src: '/static/ov_d.png'
					},
					{
						name: '极速售后',
						src: '/static/ov_e.png'
					}
				],
				app: getApp().globalData,
				url: getApp().globalData.baseurl,
				detail: '',
				state: 0
			}
		},
		onLoad(e) {
			this.state = e.state
			this.app.post('/api/chef/user/vip_config').then(res => {
				console.log(res)
				this.detail = res
			})
		},
		methods: {
			vip(){
				uni.navigateTo({
					url: '/pages/sc/vip/vip'
				})
			},
			handlePay() {
				this.app.post('/api/chef/pay/vip_pay').then(res => {
					console.log(res)
					uni.requestPayment({
						appId: res.pay_param.appId,
						nonceStr: res.pay_param.nonceStr,
						package: res.pay_param.package,
						paySign: res.pay_param.paySign,
						signType: res.pay_param.signType,
						timeStamp: res.pay_param.timeStamp,
						success: (e) => {
							uni.showToast({
								title: '支付成功',
								icon: "none"
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/user'
								})
							}, 1500)
						},
						fail: (e) => {
							uni.showModal({
								content: "支付失败",
								showCancel: false
							})
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.pagebox {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #EEFCEB;
		padding: 30rpx 0 0 0;
		box-sizing: border-box;
		overflow: auto;

		.openvip_card {
			width: 100%;
			height: 350rpx;
			padding: 0 56rpx;
			box-sizing: border-box;
			margin-bottom: 14rpx;
			overflow: hidden;

			.oc_out {
				position: relative;

				image {
					width: 639rpx;
					height: 350rpx;
					position: relative;
					z-index: 1;
				}

				.oc_out_a {
					position: absolute;
					top: 66rpx;
					left: 47rpx;
					z-index: 2;
					font-weight: bold;
					color: #333;
				}

				.oc_out_b {
					height: 66rpx;
					position: absolute;
					top: 168rpx;
					left: 47rpx;
					z-index: 2;
					font-weight: 700;
					height: 66rpx;
				}

				.oc_out_c {
					font-family: HarmonyOS Sans SC;
					font-size: 22rpx;
					font-weight: normal;
					color: #333;
					position: absolute;
					bottom: 83rpx;
					left: 47rpx;
					z-index: 2;
					line-height: 26rpx;
				}
			}

		}

		.title_txt {
			height: 39rpx;
			line-height: 39rpx;
			position: relative;
			font-family: HarmonyOS Sans SC;
			font-size: 33rpx;
			font-weight: bold;
			color: #333;
			padding-left: 61.5rpx;
			margin-bottom: 49rpx;
			margin-top: 49rpx;

			image {
				width: 10rpx;
				height: 25rpx;
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;
			}
		}

		.listbox {
			width: 672rpx;
			box-sizing: border-box;
			border: 1px solid #DBDBDB;
			border-radius: 20rpx;
			background-color: #fff;
			margin-left: 40rpx;
			margin-bottom: 30rpx;

			.listbox_item {
				height: 104rpx;
				border-bottom: 1rpx solid #DBDBDB;
				padding: 27rpx 32rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: center;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-right: 21rpx;
				}

				text {
					font-family: HarmonyOS Sans SC;
					font-size: 30rpx;
					font-weight: normal;
					color: #3d3d3d;
				}
			}

			.listbox_item:last-child {
				border: 0;
			}

			// .listbox_item:not(.listbox_item:last-child) {
			// 	border-bottom: 1rpx solid #DBDBDB;
			// }
		}

		.xieyi {
			width: 650rpx;
			height: 30rpx;
			margin-left: 40rpx;
			font-size: 26rpx;
			color: #84BD00;
			margin-bottom: 256rpx;
		}

		.bottom_box {
			width: 750rpx;
			height: 120rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 19rpx 12rpx;
			box-sizing: border-box;

			.botbox_left {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.botbox_btn {
				width: 359rpx;
				height: 82rpx;
				background: #84BD00;
				border-radius: 16rpx;
				font-family: HarmonyOS Sans SC;
				font-size: 33rpx;
				font-weight: normal;
				color: #fff;
				text-align: center;
				line-height: 82rpx;
			}
		}
	}
</style>